import React, { ReactNode } from 'react';
import { Card, Typography, Spin, Space } from 'antd';
import { useMediaQuery } from 'react-responsive';

const { Title } = Typography;

interface ResponsiveCardProps {
  title?: string | ReactNode;
  children: ReactNode;
  loading?: boolean;
  extra?: ReactNode;
  hoverable?: boolean;
  bodyStyle?: React.CSSProperties;
  headStyle?: React.CSSProperties;
  style?: React.CSSProperties;
  className?: string;
  fullHeight?: boolean;
  noPadding?: boolean;
}

/**
 * 响应式卡片组件
 * 自动根据屏幕尺寸调整样式和布局
 */
const ResponsiveCard: React.FC<ResponsiveCardProps> = ({
  title,
  children,
  loading = false,
  extra,
  hoverable = false,
  bodyStyle,
  headStyle,
  style,
  className,
  fullHeight = false,
  noPadding = false
}) => {
  // 使用react-responsive检测不同设备尺寸
  const isMobile = useMediaQuery({ maxWidth: 767 });
  const isTablet = useMediaQuery({ minWidth: 768, maxWidth: 991 });
  
  // 根据设备尺寸调整边距
  const getPadding = () => {
    if (noPadding) return 0;
    if (isMobile) return 12;
    if (isTablet) return 16;
    return 24;
  };
  
  // 设置卡片标题样式
  const getTitleSize = () => {
    if (isMobile) return 16;
    if (isTablet) return 18;
    return 20;
  };
  
  // 组合样式
  const combinedBodyStyle = {
    padding: getPadding(),
    height: fullHeight ? 'calc(100% - 57px)' : undefined,
    ...bodyStyle
  };
  
  const combinedStyle = {
    height: fullHeight ? '100%' : undefined,
    ...style
  };
  
  const combinedHeadStyle = {
    padding: `${getPadding() / 2}px ${getPadding()}px`,
    ...headStyle
  };
  
  // 渲染标题
  const renderTitle = () => {
    if (!title) return null;
    
    if (typeof title === 'string') {
      return (
        <Title level={5} style={{ fontSize: getTitleSize(), margin: 0 }}>
          {title}
        </Title>
      );
    }
    
    return title;
  };
  
  return (
    <Card
      title={renderTitle()}
      extra={extra}
      loading={false} // 使用自定义加载状态
      hoverable={hoverable}
      bodyStyle={combinedBodyStyle}
      headStyle={combinedHeadStyle}
      style={combinedStyle}
      className={`responsive-card ${className || ''}`}
    >
      {loading ? (
        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: 200 }}>
          <Space>
            <Spin size="large" />
          </Space>
        </div>
      ) : (
        children
      )}
    </Card>
  );
};

export default ResponsiveCard; 